<template>
  <div class="mb-32rpx flex items-center justify-between">
    <div class="w-150rpx text-28rpx text-hex-333333">{{ props.title }}</div>
    <div class="relative w-50% flex items-center justify-end" @click="selectShow=!selectShow">
      <div class="text-24rpx text-hex-CBCBCB">{{ typeData }}</div>
      <image
        :src="`${cdnUrl}/imgs/shop/moreicon.png${imgVersion}`"
        mode="scaleToFill"
        class="h-42rpx w-42rpx"
      />
      <div v-if="selectShow" class="boxShdow absolute right-0 top-30rpx z-999 box-border bg-hex-ffffff p-10rpx px-20rpx">
        <div
          v-for="item in props.selectList"
          class="mb-15rpx"
          @click="selectData(item.text)">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  selectList: {
    type: Object,
  },
  title: {
    type: String,
  },
})
const emits = defineEmits(['dataSelectConfirm'])
let selectShow: any = $ref(false)
let typeData: any = $ref('请选择')
const selectData = (data) => {
  typeData = data
  emits('dataSelectConfirm', typeData)
}
</script>
